/**
 * 打印
 */

import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import React, { useState, useRef, useCallback, useEffect } from 'react';
import { useRequest } from '@umijs/hooks';
import { Button, Spin, message } from 'antd';
import styles from './index.less';
import moment from 'moment';
import printJS from 'print-js';

import {
  expressTransportationPrint
} from './service.js';
import {
  Const
} from '../Const';

import AuthComponent from '@/components/Authorized/AuthComponent';

class PrivateData {
  static buttonArr = [
    { text: '打印', value: '1', authCode: ['basicPermissions'] },
  ];
}

const PrintPage = props => {

  const { location: { state } } = props;

  const [imgUrl, setImgUrl] = useState('');
  const [imgUrlArr, setImgUrlArr] = useState([]);

  // 获取打印数据 - 速运
  const { run: runExpressTransportationPrint, loading: suyunLoading } = useRequest(params => expressTransportationPrint(params), {
    manual: true,
    onSuccess (res) {
      // console.log(res, '获取打印数据');
      setImgUrl(res || '');
      setImgUrlArr([]);
    }
  });


  useEffect(() => {
    let ownerType = state.ownerType;
    if (ownerType === 8) {
      runExpressTransportationPrint({
        accidentId: state.accidentId,
        imgWidthPx: 0,
        imgHeightPx: 0
      })
    }
  }, [state]);

  // 打印
  const printIt = useCallback(obj => {
    printJS(obj);
  }, []);

  const buttonArrClick = useCallback(val => {
    if (val === '1') {
      printIt({
        printable: 'printPageImgBox',
        type: 'html',
        maxWidth: '1920',
        scanStyles: false,
        style: '#printPageImgBox{width: 100%; height: auto; overflow: hidden;}.imgPrint{width: 100%; height: auto; display: inline-block;}',
        // targetStyles: ['*'],
        onPrintDialogClose: (val) => {
          console.log(val, 'onPrintDialogClose')
        }
      });
    }
  }, [state]);

  return (
    <div className={styles.printPageContent}>
      <div className={styles.topTitle}>
        <div className={styles.topTitleLeft}>打印</div>
        <div className={styles.topTitleRight}>
          {PrivateData.buttonArr.map((item, index)=> {
            let ownerType = +state.ownerType;
            let isShow = false;
            for (let authItem of item.authCode) {
              if (AuthComponent.getAuth(Const.permissionsType.get(ownerType) + '.' + authItem)) {
                isShow = true;
                break;
              }
            }
            if (item.value === '1' && isShow) {
              return <Button
                type="primary"
                key={index}
                onClick={() => buttonArrClick(item.value)}
                size="small">
                {item.text}
              </Button>
            }
          })}
        </div>
      </div>
      {(suyunLoading) ? <div className={styles['f-c-c']}>
        <Spin />
      </div> : <div id="printPageImgBox" className={styles.imgContent}>
        {imgUrl && <img className="imgPrint" src={`data:image/jpeg;base64,${imgUrl}`} />}
        {imgUrlArr.map((item, index) => (
          <img key={index} className="imgPrint" src={`data:image/jpeg;base64,${item}`} />
        ))}
      </div>}
    </div>
  )
};

export default PrintPage;
